<template>
	<view class="signInCon">
		<view class="header">
			<view class="header-con">
				<view class="signInTitle">
					{{info.signInType === '1' ?'常白班两卡':'夜班两卡'}}
				</view>
				<view class="signInTime">
					{{`${info.start}-${info.end}`}}
				</view>
			</view>
			<view class="header-list">
				<view class="item" v-for="(item,index) in signLogs" :key="index">
					<view class="label">
						{{`第${index+1}次打卡`}}
					</view>
					<view class="value">
						{{item.signInTime}}
					</view>

				</view>

			</view>
		</view>
		<view class="locationGps">
			<image src="/static/images/location.png" style="width:24px;height:24px;" />
			<view class="locationGps-tips">
				<view class="gps">
					机管-GPS
				</view>
				<view class="tips">
					此地点再考勤范围内
				</view>

			</view>
			<image src="/static/images/reload.png" style="width:24px;height:24px;" />
		</view>
		<view class="sign" >
			<view class="signBtn" @click="handleSign">
				<view>
					打卡
				</view>
				{{nowTime}}
			</view>
			<view class="signLog">
				打卡记录
				
			</view>
		</view>

	</view>
</template>

<script>
	import dayjs from '@/utils/dayjs.js'
	export default {
		data() {
			return {
				info: {
					start: '09:00',
					end: '18:00',
					signInType: '1',
				},
				signLogs: [{
						signInTime: '2024-05-31 09:00:00',
					}

				],
				nowTime: dayjs().format('HH:mm:ss'),

			};
		},
		onLoad() {
			console.log(9999)
			
			
			setInterval(() => {
				this.nowTime = dayjs().format('HH:mm:ss')
			}, 1000)
		},
		onShow() {
			


		},
		methods: {
			handleSign(){
				console.log('gisn')
				uni.getLocation({
					type: 'wgs84',
					success:(result)=> {
						console.log(result)
					},
					fail:(err)=>{
						console.log(err)
					}
				})	
			},
			getSignInLogList() {

			},
			getDaySignInInfo() {

			}
		}

	}
</script>

<style lang="scss">
	.signInCon {
		width: 100%;
		min-height: 100vh;
		background-color: rgb(246, 247, 251);

		.header {
			background-color: rgb(19, 190, 75);
			color: #fff;
			padding: 32px 16px 12px 16px;

			.header-con {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
			}

			.signInTitle {
				font-size: 18px;

			}

			.signInTime {
				font-size: 18px;
				margin-top: 6px;
			}
		}

		.header-list {
			margin-top: 32px;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 13px;
			}
		}

		.locationGps {
			background-color: #fff;
			padding: 16px 16px;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.locationGps-tips {
				margin-left: 12px;
				flex: 1;

				.gps {
					color: #000;

				}

				.tips {
					color: #888;
					font-size: 12px;
					margin-top: 4px;
				}
			}
		}

		.sign {
			position: fixed;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			bottom: 50px;

			.signBtn {
				background-color: rgb(19, 190, 75);
				width: 100px;
				height: 100px;
				border-radius: 100px;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				box-shadow: 0px 10px 5px rgba(19, 190, 75, .5);
			}
			
			.signLog{
				color: rgb(19, 190, 75);
				margin-top: 20px;
				font-size: 16px;
			}

		}
	}
</style>